<template>
	<view class="content flex_c">
		<view class="statusHeight"></view>
		<view class="topNavWrap dsp_f flex_ai_c flex_jc_c">
			<view class="topSearch dsp_f flex_ai_c flex_jc_c">
				<view class="topSearchIcon iconfont">
					&#xe69d;
				</view>
				<input class="topSearchInp" confirm-type="search" placeholder="搜索项目/机构/咨询师" placeholder-style="color:#ffffff" />
			</view>
		</view>
		
		<view class="wrap">
			<view class="custCategoryWrap flex_r flex_ai_c flex_jc_c">
				<view class="custCatList  dsp_f flex_ai_c flex_jc_c flex_1" 
							v-for="(item,index) in custPriArr" 
							:key="index"
							@click="custCatAct = index">
					<text :class="{custCatAct : custCatAct === index}">{{item.tab}}</text>
				</view>
			</view>
			<scroll-view class="custListWrap flex_c flex_ai_c" scroll-y="true">
				<view class="custList flex_c flex_ai_c" v-for="(item,index) in custArr">
					<view class="custTitle flex_r flex_ai_c ">
						<view class="custTitleDec"/>
						<view class="flex_r flex_ai_c flex_jc_sb flex_1 padRight15">
							<text>{{item.custTitle}}</text>
							<view>
								<text class="custTypeName" 
											:class="{
																'custCancel':item.custType === 0,
																'custPay':item.custType === 1,
																'custConduct':item.custType === 2,
																'custSettlement':item.custType === 3,
															}">
									{{item.custTypeName}}
								</text>
							</view>
						</view>
					</view>
					<view class="custInfoWrap flex_r flex_jc_sb flex_ai_c">
						<view class="custInfo flex_c ">
							<view class="flex_r  flex_jc_s">
								<view class="custInfoIcoWrap">
									<view class="iconBg dsp_f flex_ai_c flex_jc_c" style="background: #f42121;">
										<view class="iconfont custInfoIco" >
											&#xe65c;
										</view>
									</view>
								</view>
								<text>{{item.address}}</text>
							</view>
							<view class="flex_r  flex_jc_s">
								<view class="custInfoIcoWrap">
									<view class="iconBg dsp_f flex_ai_c flex_jc_c" style="background: #216bf3;">
										<view class="iconfont custInfoIco">
											&#xe610;
										</view>
									</view>
								</view>
								<text>{{item.product}}</text>
							</view>
						</view>
						<view class="buttonWrap padRight15 flex_r flex_ai_c flex_jc_c">
							<view class="iconfont custPhoneIcon">
								&#xe630;
							</view>
							<button class="uni-button-mini uni-button-primary">
								编辑
							</button>
						</view>
					</view>
				</view>
			</scroll-view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				custPriArr:[
					{tab:'全部',id:0},
					{tab:'预收款项',id:1},
					{tab:'进行中',id:2},
					{tab:'已结算',id:3},
					{tab:'已取消',id:4},
				],
				// 标签选择
				custCatAct:0,
				//客户列表
				custArr:[
					{custTitle:'泉州众维咨询有限公司',custType:0,custTypeName:'已取消',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:1,custTypeName:'预收8000',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:1,custTypeName:'预收8000',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:2,custTypeName:'进行中',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:3,custTypeName:'已结算',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:3,custTypeName:'已结算',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:0,custTypeName:'已取消',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:0,custTypeName:'已取消',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:0,custTypeName:'已取消',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:0,custTypeName:'已取消',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:0,custTypeName:'已取消',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:0,custTypeName:'已取消',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:0,custTypeName:'已取消',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:0,custTypeName:'已取消',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:0,custTypeName:'已取消',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:0,custTypeName:'已取消',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:0,custTypeName:'已取消',address:'[人权][西雅之家][客户代表]',product:'认证咨询'},
					{custTitle:'泉州众维咨询有限公司',custType:0,custTypeName:'已取消',address:'[人权][西雅之家][客户代表]',product:'认证咨询'}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
.content {
	background-color: #f5f5f5;
	font-size: 32rpx;
	.statusHeight{
		z-index: 2000;
		width: 100%;
		height: var(--status-bar-height);
		background-image: linear-gradient(to right, #3478f5 , #3478f5);
		position: fixed;
		top: 0;
		left: 0;
	}
	.topNavWrap {
		z-index: 2000;
		width: 100%;
		height: 90rpx;
		background-image: linear-gradient(to right, #3478f5 , #3478f5);
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		.topSearch{
			width: calc(100% - 60rpx);
			height: 64rpx;
			position: relative;
			.topSearchIcon{
				position: absolute;
				top: 16rpx;
				left: 20rpx;
				color: #FFFFFF;
			}
			.topSearchInp{
				width:  calc(100% - 55rpx);
				height: 64rpx;
				padding: 0 55rpx;
				border-radius: 100rpx;
				background-color: #65b6f7;
				color: #FFFFFF;
			}
		}
	}
	.wrap{
		width: 100%;
		min-height: calc(100vh - 130rpx);
		margin-top: calc(var(--status-bar-height) + 90rpx);;
		padding-bottom: 20rpx;
		background-color: #f5f5f5;
		.custCategoryWrap{
			z-index: 2000;
			width: 100%;
			height: 85rpx;
			position: fixed;
			top: (var(--status-bar-height) + 90rpx);
			left: 0;
			border-bottom: 1px solid #e5e5e5;
			color: #919191;
			background-color: #FFFFFF;
			.custCatList{
				.custCatAct{
					border-bottom: 2px solid #3478f5;
					color: #3478f5;
				}
				>text{
					transition: all .3s;
					display: inline-block;
					height: 85rpx;
					line-height: 85rpx;
				}
			}
		}
		.custListWrap{
			padding-top: calc(var(--status-bar-height) + 0rpx);
			.custList{
				width: 685rpx;
				height: 205rpx;
				margin: 30rpx auto 0 auto;
				border-radius: 10rpx;
				background-color: #FFFFFF;
				color: #333333;
				.custTitle{
					width: 100%;
					height: 75rpx;
					border-bottom: 1px solid #e4e4e4;
					font-size: 28rpx;
					.custTitleDec{
						width: 2px;
						height: 30rpx;
						margin: 0 20rpx;
						background-color: #007af0;
					}
					//已取消
					.custCancel{
						color: #898989;
					}
					//已结算
					.custSettlement{
						color: #32bd5f;
					}
					//预付款
					.custPay{
						color: #0787f1;
					}
					//进行中
					.custConduct{
						color: #f2100f;
					}
					
				}
				.custInfoWrap{
					width: calc(100% - 22rpx);
					height: 100%;
					padding-left: 22rpx;
					color: #858585;
					.custInfo{
						font-size: 26rpx;
						>view:first-child{
							margin-bottom: 20rpx;
						}
						.custInfoIcoWrap{
							.iconBg{
								width: 31rpx;
								height: 31rpx;
								margin-right: 10rpx;
								padding: 3rpx;
								border-radius: 100px;
								.custInfoIco{
									line-height: 31rpx;
									text-align: center;
									font-size: 24rpx;
									color: #FFFFFF;
								}
							}
							
						}
					}
					.buttonWrap{
						.custPhoneIcon{
							width: 50rpx;
							height: 50rpx;
							margin-right: 20rpx;
							text-align: center;
							line-height: 50rpx;
							font-size: 36rpx;
							color: #2196f3;
						}
					}
				}
			}
		}
	}
}
</style>
